<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="电话号码">
        <el-input v-model.trim="searchForm.number" clearable style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="searchForm" />
        <el-button type="primary" icon="el-icon-plus" @click="onAddClick()">新建</el-button>
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/callcenter/page"
    >
      <el-table-column prop="instanceId" label="实例ID" width="300" show-overflow-tooltip></el-table-column>
      <el-table-column prop="number" label="呼叫中心电话" width="120"></el-table-column>
      <el-table-column>
        <template slot-scope="{row}">
          <delete-confirm-button @ok="onDeleteClick(row)" />
        </template>
      </el-table-column>
    </data-table>
  </data-table-app-page>
</template>

<script>

export default {
  pageProps: {
    title: '呼叫中心实例管理'
  },
  data() {
    return {
      searchForm: {}
    }
  },
  methods: {
    onAddClick() {
      this.pushPage({
        path: '/callcenter/instance/edit',
        params: {
          mode: 'add',
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        }
      });
    },
    async onDeleteClick({instanceId}) {
      const ret = await this.$http.delete('/api/callcenter', {params: {instanceId}});
      if (ret.success) {
        this.$message.success('删除成功');
        this.$refs.table.reloadCurrentPage();
      }
    }
  }
}
</script>